<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>悦动科技 vue.js 测试</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        {{ message }}
    </div>
    <div id="app-2">
        <span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
    </div>
    <div id="app-3">
        <p v-if="seen">现在你看到我了</p>
    </div>
    <span id="app-4">Message: {{ msg }}</span>
    <p class="app-5">Using mustaches: {{rawHtml}}</p>
    <p class="app-5">Using v-html directive: <span v-html="rawHtml">This should be red.</span></p>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })

        var app2 = new Vue({
            el: '#app-2',
            data: {
                message: '页面加载于 ' + new Date().toLocaleString()
            }
        })
        var app3 = new Vue({
            el:'#app-3',
            data:{
                seen:true
            },
            created: function () {
         // `this` 指向 vm 实例
         console.log('seen is: ' + this.seen);}
        })
        var app4 = new Vue({
            el:'#app-4',
            data:{
                msg:"span text test"
            }
        })
        var app5 = new Vue({
            el:'.app-5',
            data:{
                rawHtml:'<span style="color:red">This is Red.</span>'
            }
        })
    </script>
</body>

</html>